<template>
    <div>
        <div class="flex-container" :style="css">
            <div class="flex-item" v-for="item in itemlist" :key="item.value" @click="clickitem(item)"
                :class="item.value == activevalue ? 'active' : ''">
                {{ item.label }}</div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['color', 'options', 'modelvalue', "tabbackgroundcolor"],
    data() {
        return {
            activevalue: "",
            itemlist: []
        }
    },
    computed: {
        css() {
            let cssstr = ""
            if (this.color != null) {
                return cssstr + "---optioncolor:" + this.changeAlpha(this.color, 0.5) + ";---optionactivecolor:" + this.changeAlpha(this.color, 1) + ";---tabbackgroundcolor:" + this.changeAlpha(this.tabbackgroundcolor, 0.2) + ";---activetabbackgroundcolor:" + this.changeAlpha(this.tabbackgroundcolor, 0.5) + ";"
            } else {
                return cssstr + "---optioncolor:rgba(101, 175, 254, 0.5);---optionactivecolor:rgba(101, 175, 254, 1);---tabbackgroundcolor:rgba(101, 175, 254, 0.1);---activetabbackgroundcolor:rgba(101, 175, 254, 0.5)"
            }
        }
    },
    created() {
        this.activevalue = this.modelvalue
        if (this.options != null && this.options.length > 0) {
            this.itemlist = this.options
        }
    },
    methods: {
        clickitem(item) {
            this.activevalue = item.value
            this.$emit("change", item)
        },
        changeAlpha(color, newAlpha) {
        var rgba = color.match(/\d+(\.\d+)?/g); // 解析颜色的 RGBA 值
        if (rgba!=null&& rgba.length >= 3) {
          var newColor =
              "rgba(" +
              rgba[0] +
              ", " +
              rgba[1] +
              ", " +
              rgba[2] +
              ", " +
              newAlpha +
              ")";
          return newColor;
        } else {
          return hexToRgba(color, newAlpha); // 如果颜色不是 RGBA 格式，直接返回原始颜色
        }
      },
       hexToRgba(hex, alpha) {
        var r = parseInt(hex.substring(1, 3), 16);
        var g = parseInt(hex.substring(3, 5), 16);
        var b = parseInt(hex.substring(5, 7), 16);
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
      }
    },
    watch: {
        options: {
            //监听的对象
            deep: true, //深度监听设置为 true
            handler() {
                if (this.options != null && this.options.length > 0) {
                    this.itemlist = this.options
                }
            },
        },
        modelvalue() {
            this.activevalue = this.modelvalue
        }
    }
}
</script>
<style scoped>
.flex-container {
    display: flex;
    align-items: center
        /* 设置为Flex布局 */
}

.flex-item {
    flex: 1;
    /* 设置flex为1，平均分配空间 */
    /* 添加一些内边距 */
    text-align: center;
    /* 文字居中 */
    cursor: pointer;
    color: var(---optioncolor);
    background-color: var(---tabbackgroundcolor);
}

.flex-item:hover,
.active {
    color: var(---optionactivecolor);
    background-color: var(---activetabbackgroundcolor);
}
</style>
